<template>
    <div>
        <div class="searchBtn">
            <button class="pre" @click="unFinishBtn">待完成 <i class="el-icon-edit"></i></button>
            <button class="back" @click="finishBtn" style="margin-left: 5px;">已完成体检总结 <i class="el-icon-circle-check"></i></button>            
        </div>
        
        <div class="notify">
            <p><i>提示：1.当用户的订单中出现<b>未体检</b>的时候是无法进行体检总结的哦！2.点击用户编号可以直接进去体检总结</i></p>
        </div>
        <el-table
            v-loading="loading"
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
                prop="orderExaminationId"
                label="订单编号"
                width="150"
                >
                <template slot-scope="scope">  
                    <span @click="summaryByExamId(scope.row.orderExaminationId,scope.row.visitIsStatus)">{{ scope.row.orderExaminationId }}</span>  
                </template>
            </el-table-column>
            <el-table-column
                prop="patientIdCard"
                label="身份证信息"
                width="170">
            </el-table-column>
            <el-table-column
                prop="adminId"
                label="处理医生id"
                width="120">
            </el-table-column>
            <el-table-column
                prop="projectName"
                label="项目名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="visitDoctorSummary"
                label="体检小结"
                >
            </el-table-column>
            <el-table-column label="体检状态" width="120">  
                <template slot-scope="scope">  
                    <span style="color: orangered;" v-if="scope.row.visitIsStatus === 0">暂未体检</span> 
                    <span  v-if="scope.row.visitIsStatus === 1">已体检</span> 
                    <span style="color: red;" v-if="scope.row.visitIsStatus === 2">体检过期</span> 

                </template>  
            </el-table-column> 
        </el-table>
        <el-button type="primary" @click="summaryBtn" class="summary"> {{ text }}</el-button>
        <el-dialog title="体检总结" :close-on-click-modal="false" :showClose="false" :visible.sync="dialogFormVisible">
            <el-form :model="form"  :rules="rules" ref="form">
                <el-form-item label="订单编号" required>
                    <el-select style="float: left;" v-model="selectOption" placeholder="请选择要写入的体检编号">
                        <el-option
                        v-for="id in option"
                        :key="id"
                        :label="id"
                        :value="id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="体检总结"  prop="summary">
                    <el-input type="textarea"  v-model="form.summary" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="commit">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination
            background
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage" 
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.total"
            >
        </el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData:[],
            dialogFormVisible:false,
            form: {
                summary:'',
            },
            option:[],
            selectOption:"",
            rules: { 
                summary: [
                    { required: true, message: '请填写体检总结', trigger: 'blur' }
                ]
            },
            finish:0,
            text:'',
            loading: true,
            // 分页用的
            page:{
                currentPage: 1,  
                pageSize:5,
                total:0
            },
        }
    },
    created(){
        this.getAll()
    },
    methods:{
        getAll(){
            if(this.finish == 0){
                this.text = "写入体检总结"
            }else{
                this.text = "修改体检总结"
            }
            this.option = []
            // 参数是0说明要求的是未完成得
            this.$axios.get(
                "/visitDoctor/getAllInfo",
                {
                    params:{
                        finish:this.finish,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    this.tableData = res.data.list
                    this.page.total = res.data.totalSize

                    console.log("体检总结",res)
                    // this.option.push(this.tableData)
                    for(var i = 0 ; i< res.data.list.length;i++){
                        if(i == 0){                        
                            this.option.push(res.data.list[i].orderExaminationId)
                        }else if(res.data.list[i].orderExaminationId!=res.data.list[i-1].orderExaminationId){
                            this.option.push(res.data.list[i].orderExaminationId)
                        }
                        if(res.data.list[i].visitIsStatus === 0){
                            // 使用filter方法过滤掉值为valueToRemove的元素  
                            this.removeOption(res.data.list[i].orderExaminationId)
                        }
                    }
                    this.loading = false
                }
            })

        },
        handleCurrentChange(newPage) {  
            // console.log(`当前页码变更为：${newPage}`);  
            //    在这里可以根据新的页码进行数据的加载或其他操作  
            this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  
            // 例如，你可能需要发送一个请求来获取新页码对应的数据  
            this.getAll();
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1) {
                // 获取当前单元格的值
                const currentValue = row[column.property];
                // 获取上一行相同列的值
                const preRow = this.tableData[rowIndex - 1];
                const preValue = preRow ? preRow[column.property] : null;
                // 如果当前值和上一行的值相同，则将当前单元格隐藏
                if (currentValue === preValue) {
                    return { rowspan: 0, colspan: 0 };
                } else {
                // 否则计算当前单元格应该跨越多少行
                    let rowspan = 1;
                    for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                        const nextRow = this.tableData[i];
                        const nextValue = nextRow[column.property];
                        if (nextValue === currentValue) {
                            rowspan++;
                        } else {
                            break;
                        }
                    }
                    return { rowspan, colspan: 1 };
                }
            }
        },
        commit(){
            if(this.form.summary == "" || this.selectOption == ""){
                this.$message.error("所填写的东西不能为空")
            }else{
                this.$axios.get(
                    "/record/insertInfo",
                    {
                        params:{
                            adminId:this.$store.state.adminId,
                            summary:this.form.summary,
                            examId:this.selectOption
                        }
                    }
                ).then(res=>{
                    if(res!=undefined){
                        this.dialogFormVisible = false
                        if(res.code == 1){
                            this.$notify({
                                title: '体检总结',
                                message: '体检总结写入成功！',
                                type: 'success'
                            });
                            // 重新获取一下数据
                            this.getAll();
                            // 移除体检编码
                            this.removeOption(this.selectOption)
                            // 重置表单数据
                            this.resetForm()
                        }else{
                            this.$notify({
                                title: '体检总结',
                                message: '体检总结修改成功！',
                                type: 'success'
                            });
                        }
                    }
                })
            }
        },
        removeOption(valueToRemove) {  
            // 使用filter方法过滤掉值为valueToRemove的元素  
            this.option = this.option.filter(item => item !== valueToRemove);  
        },
        summaryBtn(){
            this.dialogFormVisible = true
        },
        resetForm() {
        // 重置表单数据
            this.$refs.form.resetFields();
            this.form = {
                summary: '',
            };
            this.selectOption = ""
        },
        unFinishBtn(){
            this.finish = 0;
            this.getAll();
        },
        finishBtn(){
            this.finish = 1;
            this.getAll();
        },
        summaryByExamId(id,visitIsStatus){
            if(visitIsStatus == 0 || visitIsStatus == 2){
                alert("暂未体检无法填写")
            }else{
                //通过订单号直接点击进去修改
                this.option = [],
                this.option.push(id)
                // 让体检总结页面一打开就是这个用户的id
                this.selectOption = id
                // 让表格显示出来
                this.summaryBtn();
            }

        },
        cancel(){
            this.dialogFormVisible = false
            this.$message({
                showClose: true,
                message: '已经取消该操作'
            });
            this.getAll()
        }
    }
}
</script>
<style scoped>
.summary{
    margin-top: 2%;
}

.notify{
    float: left;
    position: absolute;
    color: rgb(104, 103, 103);
}
.notify p{
    margin-top: -15px;
    font-size: 14px;
    font-family: 'PingFang SC', sans-serif;
}
.searchBtn{
    float: left;
    margin-top: 2%;
    margin-bottom: 1%;
}
.searchBtn button{
    border: none;
    color: white;
    padding: 5px;
    border-radius: 15px;
    width: 125px;
}
.searchBtn button:hover{
    cursor: pointer;
    background-color: rgb(85, 180, 248);
}
.pre{
    background-color: rgb(252, 105, 105);
}
.back{
    background-color: rgb(0, 149, 255);
}
</style>

